<template>
	<div class="icon-page" style="padding:0px;">
		<div class="box-menu-div" v-if="init">
			<div style="clear: both; height: 1px;">&nbsp;</div>
			<!-- <div id="page-content-wrapper" style="margin-left: 0px; background-color:#eef1f6;"> -->
			<div class="box-menu" v-for="(menu, i) in menus" v-if="menu.text != '废弃'">
				<div class="title">{{menu.text}}</div>
				<template v-for="(child, i) in menu.children">
					<div class="box-item" style="background: unset;" @click="onSelect(child)">
					<div class="icon-box" :style="'background:'+getColor()">
						<i :class="'el-icon-' + getType(child)"></i>
						<!-- <Icon size="40" color="#ffffff" :type="getType(child,i)"></Icon> -->
					</div>
					<div class="item-text">{{child.text}}</div>
					</div>
					<!-- <template v-if="(i + 1) % getBoxSpan(menu) == 0"><br></template> -->
				</template>
			</div>
			<div style="clear: both;"></div>
			<!-- </div> -->
		</div>
	</div>
</template>

<script>
module.exports = {
	data: function() {
		return {
			init: false,
			menus: [],
			menuType: {
				'单元测试': 's-grid',
				'API构建': 'document',

				'用户管理': 'user-solid',
				'角色管理': 'user',
				'映射配置管理': 'sort',
				'分布式锁管理': 'lock',
			}
		}
	},
	created: function() {
		// this.initMenu();
		this.initMenuLocal();
	},
	methods: {
		initMenuLocal: function() {
			this.menus = window.menus;
			this.init = true;
		},
		initMenu: function() {
			var _this = this;
			$.postc('menu/ctrlTree', {}, function(result) {
                // console.log("menu/ctrlTree", result);
                if(result == false || result.status == "failure") {
                    // console.log("result.msg", result.msg);
                    if(result.msg == '用户未登录') {
                        location.href = '../login.html';
                    }
                }
				_this.menus = result;
				_this.init = true;
				console.log('initMenu', _this.menus);
            
            }, 'json');
		},
		getColor: function (node, index) {
        	return Util.getColorAuto();
		},
		getType: function (child) {
			var icon = this.menuType[child.text];
			if(icon == null) {
				icon = 'delete';
			}
			return icon;
		},
		onSelect: function (child) {
			// console.log('select', child.text);
			window.App.fromIcon(child.text);
			// var map = {
			//     'API构建': '/api-build',
			//     '单元测试': '/unifyTest'
			// };
			// var path = map[child.text];
			// this.$router.push({
			// 	path: path
			// });
			
// 			Store.commit('setTagName', child.text);
		}
	},
}
</script>

<style>
.icon-page {
	color:#4e4e4e;
	font-size: 13px;
}
.icon-page .title {
	padding-left: 10px;
	margin-bottom: 10px;
    border-left: 6px solid #ff9e2b;
}
.icon-page i {
	font-size:40px;
	color:white;
	margin-top:10px;
}

.box-menu-div {
    /* border: 1px solid #000; */
    padding-bottom: 50px;
    margin:0px;
    background-color: #fff;
  }
  .box-menu {
    /* float: left; */
    /* width: 350px; */
    /* height: 350px; */
    margin:15px;
    padding:10px;
    /* background: #fff; */
  }
  .box-menu .box-item {
    display: inline-block;
    text-align: center;
    padding: 10px;
    overflow: hidden;
    width: 100px;
	/* height: 130px; */
	height:100px;
    cursor: pointer;
  }
  .box-item .icon-box {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 30%;
  }
  .box-item .item-text {
    margin-top: 5px;
  }
  .icon-box .ivu-icon {
    margin-top:11px;
  }

</style>
